<script lang="ts" setup>
import { useSettingsStore } from "@/stores/settings.ts"
import { watch } from "vue"

const store = useSettingsStore()

const theme = ref(store.settings.theme)
const predefineColors = ref([
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585"
])

watch(theme, (newVal) => {
  store.changeSetting({ key: "theme", value: newVal })
})
</script>

<template>
  <el-color-picker
    v-model="theme"
    :predefine="predefineColors"
  ></el-color-picker>
</template>

<style scoped></style>
